<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css">
    </head>

    <body>
        <!-- EXAMPLES -->
        <!--
        These examples are intended to mimic the Ext Slider examples.  Ideally,
        the GeoExt.SliderTip would be replaced by similar functionality in the 
        Ext.slider.Tip.  See the following forum for details:
        http://www.sencha.com/forum/showthread.php?94903-DISCUSS-Ext.slider.Tip-hover-option
        -->
        <h1>GeoExt.SliderTip Examples</h1>
        <p>The GeoExt.SliderTip extends the Ext.slider.Tip with the ability to display on hover.</p>
        <p>The source is not minified - see <a href="slidertip.js">slidertip.js</a></p>
        <h3>Slider with tip</h3>
        <div id="tip-slider"></div>
        <br>
        <h3>Slider with custom tip</h3>
        <div id="custom-tip-slider"></div>
        <br>
        <h3>Slider with tip on drag only (no hover)</h3>
        <div id="no-hover-tip"></div>

        <h3>Slider with multiple thumbs</h3>
        <div id="multi-slider-horizontal"></div>

        <h3>Vertical Slider with multiple thumbs</h3>
        <div id="multi-slider-vertical"></div>

        <!-- extra space for scrolling -->
        <div style="height:150px;"></div>
        <script src="../lib/GeoExt/widgets/tips/SliderTip.js"></script>
        <script src="slidertip.js"></script>
    </body>
</html>
